@import '../../../common';

.ui.menu.navbar {
  background-color: $polar_grey_0;

  :host-context(.night) & {
    background-color: $darkTheme_grey_0;
  }

  i {
    &.favorite {
      color: $cds_favorite_color;
    }
  }

  img.item {
    height: 50px;
    padding: 5px 10px;
    margin-right: 30px;
  }

  .ui.search {
    padding-top: 6px;
    height: 30px;
    margin-right: 10px;

    .ui.input {
      .prompt {
          background-color: rgba(225, 226, 229, .1);
          border-color: transparent;
          &:focus {
              border: 1.5px solid #50cfd9;
          }
          color: white;
          opacity: 1;
      }
      i {
          &.search.icon {
              opacity: 1;
          }
          color: white;
          opacity: 1;
      }
    }
  }

  sm-select {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 50px;
    display: flex;
    align-items: center;
  }

  sm-dropdown {
    height: 50px;
    display: flex;

    .item {
      color: white;
    }
  }

  sm-item a {
    color: black;
  }

  .item {
    padding-top: 0px;
    padding-bottom: 0px;
    color: white;

    a {
      color: white;
    }
  }

  .item.link::before {
    width: 0px;
  }

  .details {
    .title {
      font-size: 1.1em;

      &.bold {
        font-weight: bold;
      }
    }

    .notif {
      font-size: 0.8em;

      &.bold {
        font-weight: bold;
      }

      &.blue {
        color: $cds_color_teal !important;
      }

      &.orange {
        color: $cds_color_orange !important;
      }
    }

    .info {
      font-size: 0.8em;

      &.mt {
        margin-top: 4px;
      }
    }
  }

  .dropdown {
    .menu.transition {
      overflow-y: auto;
      overflow-x: auto;
      max-height: 600%;
      margin-top: 0px;
    }
  }

  .notification {
    background-color: transparent !important;

    &:focus {
      outline-style: none;
    }

    margin-left: 10px;

    i {
      margin-right: 0px;
    }

    .label {
      top: 0.3em;
      left: initial;
      bottom: initial;
      right: 0.1em;
      line-height: 0.5em;
    }

    .nopadding {
      padding: 0;
      color: white;

      .menu {
        right: -1em;

        &.transition {
          margin-top: 18px;
        }
      }
    }
  }

  .theme-switch {
    padding: 10px 16px;
  }
}

.mt5 {
  margin-top: 5px;
}

.notif {
  font-size: 0.8em;

  &.bold {
    font-weight: bold;
  }

  i {
    &.check {
      font-size: 1.5em;
      color: black;
      opacity: 0.3;

      &:hover {
        opacity: 1;
      }
    }
  }

  .title {
    font-size: 1.3em;

    &.bold {
      font-weight: bold;
    }

    &.blue {
      color: $cds_color_teal !important;
    }

    &.orange {
      color: $cds_color_orange !important;
    }
  }

  .info {
    font-size: 1em;
    color: inherit;
    text-decoration: underline;
    display: block;

    &.mt {
      margin-top: 4px;
    }
  }
}

.searchpopup {
  width: 650px;
  .description {
    padding-top: 2px;
    padding-bottom: 5px;
    a {
      color: #4183C4 !important;
    }
  }
}

.notifpopup {
  width: 400px;
}

sm-select.languageSelect {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.ui.selection.dropdown {
  width: 28rem;
  min-width: 14rem;
}